<template>
  <div class="menu-demo" v-if="!loading" style="width: 100%">
    <a-row style="width: 100%">
      <a-col :span="24" style="display: flex; flex-direction: row; width: 100%">
        <a-menu mode="horizontal" style="width: 99.5%">
          <a-menu-item
            key="0"
            :style="{ padding: 0, marginRight: '30px' }"
            @click="
              () => {
                showHightSearch = !showHightSearch;
                showai = false;
              }
            "
          >
            <a-image
              width="80px"
              src="https://t.tutu.to/md/lpdhd"
              :preview="false"
            ></a-image>
          </a-menu-item>
          <a-menu-item key="1">区县</a-menu-item>
          <a-menu-item key="2">地市</a-menu-item>
          <a-menu-item key="3">省级</a-menu-item>
          <a-menu-item key="4">国家</a-menu-item>
        </a-menu>

        <div
          style="
            background: #fff;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-right: 30px;
          "
        >
          <a-select
            :style="{ width: '200px', marginRight: '50px' }"
            placeholder="请选择当前机构"
            v-model="userStore.user_org_id"
          >
            <a-option
              v-for="(item, index) in dataSource.alldept"
              :value="item.org_id"
              :key="index"
              >{{ item.org_name }}</a-option
            >
          </a-select>
          <div
            style="display: flex; flex-direction: column; align-items: center"
          >
            <img
              src="https://qzd-web-group-oss.qizhidao.com/pc/static/prod/-/busicompoPcStatic/img/ai.fece7380.png"
              style="width: 35px; height: 35px; margin-right: 10px"
            />
          </div>
          <a-switch
            style="width: 80px"
            v-model="showai"
            @change="(val:any) => {
            if(val){
              showHightSearch = false
            }
          }"
          >
            <template #checked> 科秘AI </template>
            <template #unchecked> 科秘AI </template></a-switch
          >
        </div>
      </a-col>
    </a-row>
    <a-row style="width: 89.4vw; margin-top: 10px" :gutter="20" v-if="!showai">
      <a-col :span="3">
        <a-menu
          v-if="!showai"
          :default-open-keys="['0']"
          :default-selected-keys="['0_2']"
          show-collapse-button
          breakpoint="xl"
        >
          <div
            style="
              color: #4e5969;
              font-size: 12px;
              margin-top: 10px;
              margin-bottom: 10px;
              padding-left: 12px;
            "
            >适用领域</div
          >
          <div
            v-for="(item, index) in dataSource.filedList"
            :key="item.field_id"
          >
            <a-menu-item
              :key="item.field_id"
              @click="handleFieldClick(item.field_id)"
            >
              <a-badge
                v-if="item.policy_count"
                :count="item.policy_count"
                max-count="999"
                style="position: relative; left: 0px"
              />
              <template #icon>
                <svg-icon
                  :name="item.field_icon"
                  style="height: 1.3em; width: 1.3em"
                />
              </template>
              <span style="margin-left: 2px">{{ item.field_name }}</span>
            </a-menu-item>
          </div>
        </a-menu>
      </a-col>
      <a-col
        v-if="allProvice?.length > 0"
        :span="20"
        style="
          background: #fff;
          scrollbar-width: none;
          scrollbar-color: transparent transparent;
        "
      >
        <a-row v-if="!showHightSearch && !showai">
          <a-row>
            <a-col
              :span="14"
              style="height: 650px; width: 680px; overflow: hidden"
            >
              <ChinaMap
                :policyData="policyData"
                style="width: 100%; margin-top: -10px"
            /></a-col>
            <a-col :span="10">
              <a-card
                :style="{ width: '100%' }"
                title="政策资讯"
                :bordered="false"
                v-if="allProvice?.length > 0"
              >
                <a-timeline
                  labelPosition="relative"
                  v-for="(item, index) in allProvice.slice(20, 30)"
                >
                  <a-timeline-item
                    :label="item.create_time.split(' ')[0]"
                    style="margin-bottom: -25px"
                  >
                    <div
                      class="titleff one-line"
                      style="font-size: 15px"
                      @click="toDetail(item)"
                    >
                      {{ item.policy_title }}
                    </div>
                    <br />
                  </a-timeline-item>
                </a-timeline>
              </a-card>
            </a-col>
          </a-row>
          <a-row style="padding: 20px; width: 100%">
            <a-row :gutter="10" class="newsList">
              <a-col :span="6" style="">
                <a-card
                  v-if="allProvice?.length > 0"
                  :style="{ width: '100%' }"
                  title="申报通知"
                  :bordered="true"
                >
                  <template #extra>
                    <a-link
                      @click="
                        () => {
                          showHightSearch = !showHightSearch;
                        }
                      "
                      >查看更多</a-link
                    >
                  </template>
                  <a-list :bordered="false" :split="false">
                    <a-list-item
                      class="one-line"
                      style="padding: 0"
                      v-for="(item, index) in allProvice.slice(15, 20)"
                      @click="toDetail(item)"
                    >
                      <div class="titleff">
                        <div class="ellpis" style="width: 300px">
                          {{ item.policy_title }}</div
                        >
                      </div>
                      <p
                        style="
                          color: #949aa1;
                          font-size: 14px;
                          margin: 10px 0 20px;
                        "
                        >{{ item.create_time.split(' ')[0] }}</p
                      >
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="6" style="">
                <a-card
                  v-if="allProvice?.length > 0"
                  :style="{ width: '100%' }"
                  title="公示公告"
                  :bordered="true"
                >
                  <template #extra>
                    <a-link
                      @click="
                        () => {
                          showHightSearch = !showHightSearch;
                        }
                      "
                      >查看更多</a-link
                    >
                  </template>
                  <a-list :bordered="false" :split="false">
                    <a-list-item
                      class="one-line"
                      style="padding: 0"
                      v-for="(item, index) in allProvice.slice(10, 15)"
                      @click="toDetail(item)"
                    >
                      <div class="titleff">
                        <div class="ellpis" style="width: 300px">
                          {{ item.policy_title }}</div
                        >
                      </div>
                      <p
                        style="
                          color: #949aa1;
                          font-size: 14px;
                          margin: 10px 0 20px;
                        "
                        >{{ item.create_time.split(' ')[0] }}</p
                      >
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="6" style="">
                <a-card
                  v-if="allProvice?.length > 0"
                  :style="{ width: '100%' }"
                  title="政策法规"
                  :bordered="true"
                >
                  <template #extra>
                    <a-link
                      @click="
                        () => {
                          showHightSearch = !showHightSearch;
                        }
                      "
                      >查看更多</a-link
                    >
                  </template>
                  <a-list :bordered="false" :split="false">
                    <a-list-item
                      class="one-line"
                      style="padding: 0"
                      @click="toDetail(item)"
                      v-for="(item, index) in allProvice.slice(5, 10)"
                    >
                      <div class="titleff">
                        <div class="ellpis" style="width: 300px">
                          {{ item.policy_title }}</div
                        >
                      </div>
                      <p
                        style="
                          color: #949aa1;
                          font-size: 14px;
                          margin: 10px 0 20px;
                        "
                        >{{ item.create_time.split(' ')[0] }}</p
                      >
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="6" style="">
                <a-card
                  :style="{ width: '100%' }"
                  title="其他政策"
                  :bordered="true"
                  v-if="allProvice?.length > 0"
                >
                  <template #extra>
                    <a-link>查看更多</a-link>
                  </template>
                  <a-list
                    :bordered="false"
                    :split="false"
                    v-if="allProvice?.length > 0"
                  >
                    <a-list-item
                      class="one-line"
                      v-for="(item, index) in allProvice.slice(0, 5)"
                      @click="toDetail(item)"
                      style="padding: 0"
                    >
                      <div class="titleff">
                        <div class="ellpis" style="width: 300px">{{
                          item.policy_title
                        }}</div>
                      </div>
                      <p
                        style="
                          color: #949aa1;
                          font-size: 14px;
                          margin: 10px 0 20px;
                        "
                        >{{ item.create_time.split(' ')[0] }}</p
                      >
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
            </a-row>
          </a-row>
        </a-row>
        <a-row v-if="showHightSearch && !showai">
          <!-- 高级搜索-->
          <SelectCom
            @filterChange="handleFilterChange"
            :initialParams="paramsBodyA"
          />
          <!-- 列表页 -->
          <a-row style="width: 100%">
            <List :params="paramsBody" />
          </a-row>
        </a-row>
      </a-col>
    </a-row>
    <a-row v-if="showai && !showHightSearch">
      <AiPage :dataSource="dataSource" />
    </a-row>
  </div>
  <div class="spinLoading" v-else> <a-spin size="20" dot /></div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import ChinaMap from '../components/ehcarts.vue';
  import SelectCom from './selectPolicy/index.vue';
  import { toDetail } from '@/utils/utils';
  import List from './list/list.vue';
  import AiPage from './ai/index.vue';
  import { openFilePreviewInNewPage } from '@/utils/utils';
  import { useRouter } from 'vue-router';
  import {
    getindustry,
    getpolicy_direction,
    getpolicydeplist,
    getpolicyIndex,
  } from '@/api/dataCenter';
  import { getAllpolicy, getpolicyEcharts } from '@/api/policy';
  import useLoading from '@/hooks/loading';
  import { useUserStore } from '@/store';
  const userStore = useUserStore();
  import { getorgList } from '@/api/syssetting';
  const { loading, setLoading } = useLoading(true);

  // 控制高级搜索
  const showHightSearch = ref(false);
  const showai = ref(false);
  // 省市
  const areaActive = ref('');
  // 部门
  const depActive = ref('');
  // 领域
  const fieldActive = ref('');
  // 行业
  const indurstryActive = ref('');
  // 政策类型
  const typeActive = ref('');
  // 方向类型
  const directionActive = ref('');
  // 标签列表
  const tagList = [];

  const policyData = ref(); // 地图政策
  const allpolicydept = ref(); // 所有政府部门
  const allIndustry = ref();
  const allProvice = ref();

  const dataSource = reactive({
    filedList: [], // 领域列表
    dirctionList: [],
    alldept: [],
  });

  // 筛选参数
  const paramsBody = ref({});
  // 新增：手动刷新政策列表的方法
  // 处理领域点击事件
  const paramsBodyA = ref();
  const handleFieldClick = (fieldId: string) => {
    showHightSearch.value = true;
    showai.value = false;
    paramsBodyA.value = {
      policy_field_id: fieldId,
    };
  };

  onMounted(() => {
    // 获取政策行业和政策方向
    Promise.all([
      getpolicyEcharts(),
      getindustry({
        page_size: 10000,
      }),
      getpolicyIndex({
        page_size: 10000,
      }),
      getpolicy_direction({
        page_size: 10000,
      }),
    ]).then(([allEcharts, allIndustrys, allfieldList, alldirectionList]) => {
      dataSource.alldept = userStore.allOrgList;
      policyData.value = allEcharts.data;
      allIndustry.value = allIndustrys.data.list;
      dataSource.filedList = allfieldList.data.list;
      dataSource.dirctionList = alldirectionList.data.list;
      getRequestList();
      setLoading(false);
    });
  });

  function getRequestList() {
    getAllpolicy({
      page_size: 30,
    }).then((res) => {
      allProvice.value = res.data.list;
    });
  }

  const router = useRouter();

  // 接收筛选组件的参数变化
  const handleFilterChange = (params: any) => {
    // 1. 更新本地参数
    paramsBody.value = { ...params };
  };
</script>

<style scoped>
  .menu-demo {
    box-sizing: border-box;
    width: 100%;
    background-color: var(--color-neutral-2);
  }

  .multiline-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 控制显示的行数 */
    max-height: 3.2em; /* 控制显示的高度 */
  }

  .titleff {
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    &:hover {
      color: #3677f6;
    }
  }

  .one-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  ::v-deep .newsList .arco-card-header {
    background: linear-gradient(
      -85deg,
      rgb(231, 239, 253) 0%,
      rgb(240, 245, 254) 100%,
      rgb(255, 255, 255) 100%,
      rgb(240, 245, 254) 100%
    );
  }

  .newsList {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .spinLoading {
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .heightArea {
    box-sizing: border-box;
    width: 100%;
    padding: 30px;
  }

  .bigTile {
    font-weight: bold;
    color: #333;
    font-size: 15px;
    width: 100px;
    padding-top: 4px;
  }

  .heightItme {
    display: flex;
    flex-direction: row;
    margin-bottom: -20px;
  }

  .itemaa {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap; /* 禁止换行 */
    overflow-x: auto; /* 允许水平滚动 */
    padding-bottom: 5px; /* 增加底部边距 */

    > div {
      border-radius: 4px;
      color: #63656a;
      margin-bottom: 10px;
      cursor: pointer;
      margin-right: 8px; /* 减少右侧边距 */
      padding: 4px 8px; /* 调整内边距 */
      white-space: nowrap; /* 禁止文本换行 */
      &:hover {
        color: #3677f6;
      }
    }

    .active {
      background: #3677f6;
      color: #fff;
    }
  }
  .more {
    color: #3677f6;
    margin-top: 4px;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .ellpis {
    /* 强制文本在一行内显示 */
    white-space: nowrap;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 文本溢出时显示省略号 */
    text-overflow: ellipsis;
  }
</style>
